<template>
  <div :class="['todo-item',todo.completed?'completed':'']">
    <input type="checkbox" v-model="todo.completed" />
    <label for>{{todo.content}}</label>
    <button @click="delItem"></button>
  </div>
</template>
<script>
export default {
  name: 'todoItem',
  props: { todo: Object },
  methods: {
    delItem () {
      this.$emit('del', this.todo.id)
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~styles/mixins.styl';

.todo-item {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  font-size: 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);

  &:hover {
    button:after {
      width: 20px;
      height: 20px;
      content: 'x';
      font-size: 24px;
      color: red;
    }
  }

  &.completed {
    label {
      color: #d9d9d9;
      text-decoration: line-through;
    }
  }

  input {
    text-align: center;
    width: 50px;
    height: 30px;
    cleanDefaultStyle();
    position: relative;

    &:after {
      width: 30px;
      height: 30px;
      position: absolute;
      top: -4px;
      left: 5px;
      content: '';
      border: 2px solid #ccc;
      border-radius: 50px;
    }

    &:checked:after {
      content: '√';
      flexCenter();
      font: 20px yahei;
      color: #999;
      font-weight: 600;
    }
  }

  label {
    transition: color 0.6s;
    transition: 'text-decoration' 0.6s;
    flex: 1;
  }

  button {
    width: 40px;
    background-color: transparent;
    cleanDefaultStyle();
    surson: pointer;
  }
}
</style>
